<template>
	<div class="q-pa-md">
	  <!-- 顶部信息卡片 -->
	  <q-card class="q-mb-md info-card" flat>
		<q-card-section class="bg-primary text-white">
		  <div class="text-h6">{{ salaryData.姓名 || '员工' }} 工资明细</div>
		  <div class="text-caption">发放月份: {{ currentMonth }}</div>
		</q-card-section>
	  </q-card>

	  <!-- 收入项目卡片 -->
	  <q-card v-if="hasIncome" class="q-mb-md income-card" flat>
		<q-card-section class="bg-positive text-white">
		  <div class="text-h6">
			<q-icon name="trending_up" class="q-mr-sm" />
			收入项目
		  </div>
		</q-card-section>
		<q-card-section>
		  <div class="row q-col-gutter-md">
			<div
			  v-for="item in filteredIncomeItems"
			  :key="item.key"
			  class="col-12 col-sm-6 col-md-4"
			>
			  <q-item class="income-item">
				<q-item-section>
				  <q-item-label class="text-weight-medium">{{ item.label }}</q-item-label>
				  <q-item-label caption>{{ item.description }}</q-item-label>
				</q-item-section>
				<q-item-section side>
				  <q-badge color="positive" class="text-h6">
					¥{{ salaryData[item.key] || 0 }}
				  </q-badge>
				</q-item-section>
			  </q-item>
			</div>
		  </div>

		  <!-- 收入汇总 -->
		  <q-separator class="q-my-md" />
		  <div class="text-right">
			<q-badge color="positive" class="text-h6 q-pa-sm">
			  收入合计: ¥{{ salaryData.应发合计 || 0 }}
			</q-badge>
		  </div>
		</q-card-section>
	  </q-card>

	  <!-- 扣款项目卡片 -->
	  <q-card v-if="hasDeductions" class="q-mb-md deduction-card" flat>
		<q-card-section class="bg-negative text-white">
		  <div class="text-h6">
			<q-icon name="trending_down" class="q-mr-sm" />
			扣款项目
		  </div>
		</q-card-section>
		<q-card-section>
		  <div class="row q-col-gutter-md">
			<div
			  v-for="item in filteredDeductionItems"
			  :key="item.key"
			  class="col-12 col-sm-6 col-md-4"
			>
			  <q-item class="deduction-item">
				<q-item-section>
				  <q-item-label class="text-weight-medium">{{ item.label }}</q-item-label>
				  <q-item-label caption>{{ item.description }}</q-item-label>
				</q-item-section>
				<q-item-section side>
				  <q-badge color="negative" class="text-h6">
					-¥{{ salaryData[item.key] || 0 }}
				  </q-badge>
				</q-item-section>
			  </q-item>
			</div>
		  </div>

		  <!-- 扣款汇总 -->
		  <q-separator class="q-my-md" />
		  <div class="text-right">
			<q-badge color="negative" class="text-h6 q-pa-sm">
			  扣款合计: -¥{{ salaryData.扣款合计 || 0 }}
			</q-badge>
		  </div>
		</q-card-section>
	  </q-card>

	  <!-- 实发金额卡片 -->
	  <q-card class="summary-card" flat>
		<q-card-section class="bg-primary text-white">
		  <div class="text-h6">
			<q-icon name="account_balance_wallet" class="q-mr-sm" />
			实发金额
		  </div>
		</q-card-section>
		<q-card-section class="text-center">
		  <div class="text-h3 text-weight-bold text-primary q-my-md">
			¥{{ salaryData.实发合计 || 0 }}
		  </div>
		  <div class="text-caption text-grey-6">
			应发: ¥{{ salaryData.应发合计 || 0 }} - 扣款: ¥{{ salaryData.扣款合计 || 0 }}
		  </div>
		</q-card-section>
	  </q-card>
	</div>
  </template>

  <script>
  export default {
	name: 'ScSalaryTable',
	props: {
	  salaryData: {
		type: Object,
		default: () => ({})
	  },
	  config: {
		type: Object,
		default: () => ({
		  incomeItems: [],
		  deductionItems: [],
		  itemDescriptions: {}
		})
	  }
	},
	computed: {
	  currentMonth() {
		const date = new Date();
		return `${date.getFullYear()}年${date.getMonth() + 1}月`;
	  },
	  filteredIncomeItems() {
		return this.config.incomeItems
		  .filter(item => this.salaryData[item.key] && this.salaryData[item.key] !== 0)
		  .map(item => ({
			...item,
			description: this.config.itemDescriptions[item.key] || ''
		  }));
	  },
	  filteredDeductionItems() {
		return this.config.deductionItems
		  .filter(item => this.salaryData[item.key] && this.salaryData[item.key] !== 0)
		  .map(item => ({
			...item,
			description: this.config.itemDescriptions[item.key] || ''
		  }));
	  },
	  hasIncome() {
		return this.filteredIncomeItems.length > 0;
	  },
	  hasDeductions() {
		return this.filteredDeductionItems.length > 0;
	  }
	}
  };
  </script>

  <style lang="scss" scoped>
  .info-card {
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  .income-card {
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(76, 175, 80, 0.15);
	border-left: 4px solid #4caf50;

	.income-item {
	  border-radius: 12px;
	  margin: 4px 0;
	  background: rgba(76, 175, 80, 0.05);

	  &:hover {
		background: rgba(76, 175, 80, 0.1);
		transform: translateX(4px);
		transition: all 0.3s ease;
	  }
	}
  }

  .deduction-card {
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(244, 67, 54, 0.15);
	border-left: 4px solid #f44336;

	.deduction-item {
	  border-radius: 12px;
	  margin: 4px 0;
	  background: rgba(244, 67, 54, 0.05);

	  &:hover {
		background: rgba(244, 67, 54, 0.1);
		transform: translateX(4px);
		transition: all 0.3s ease;
	  }
	}
  }

  .summary-card {
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba(33, 150, 243, 0.15);
	border-left: 4px solid #2196f3;
  }

  .text-h3 {
	font-size: 3rem;

	@media (max-width: 600px) {
	  font-size: 2rem;
	}
  }

  .q-badge {
	border-radius: 12px;
	padding: 8px 16px;
	font-weight: 500;
  }
  </style>